<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>涨幅情况汇总</title>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    <script type="text/javascript">
        // var chart;
        var flagLink = '/week-range-chart';
        // flagLink = 'http://127.0.0.1:8003/week-range-chart';

        function post() {
            var days = $("#days").val();
            var codes = [$("#code").val()];
            codes = ['sh000001', 'sz399001', 'sz399006', 'sh000016', 'sh000300', 'sh000905',
                '159865','159996','164906','510230','512170', '512200',
                '512290','512400','512660','512690','512760','512800',
                '512880','515000','515030','515050','515170','515210',
                '515220', '515260','515790','515880','516020','516800'];
            for (var i = 0; i < codes.length; i++) {
                var code = codes[i];
                var linkNew = flagLink + '?days=' + days + '&code=' + code;
                updateChart(linkNew, "container" + i);
            }
        }

        function updateChart(link, containerId) {
            var optionsColumn = {
                chart: {
                    renderTo: containerId,
                    type: 'column'
                },
                title: {
                    text: '星期每日涨幅汇总'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'category',
                    categories: ['周一', '周二', '周三', '周四', '周五'],
                    labels: {
                        rotation: 0,
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                // yAxis: {
                //     title: {
                //         text: '涨幅'
                //     }
                // },
                legend: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '涨幅 <b>{point.y:.1f}%</b>'
                },
                series: [{
                    name: 'percentage',
                    data: [],
                    dataLabels: {
                        enabled: true,
                        rotation: 0,
                        color: '#FFFFFF',
                        align: 'center',
                        format: '{point.y:.2f} %', // one decimal
                        style: {
                            fontSize: '15px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                }]
            };
            $.getJSON(link, function (input) {
                var values = [];
                values.push(input.data.MONDAY.avgRange);
                values.push(input.data.TUESDAY.avgRange);
                values.push(input.data.WEDNESDAY.avgRange);
                values.push(input.data.THURSDAY.avgRange);
                values.push(input.data.FRIDAY.avgRange);
                optionsColumn.series[0].data = values;
                optionsColumn.title.text = input.name + " " + input.code;
                var chart1 = new Highcharts.Chart(optionsColumn);
            });
        }

        $(document).ready(function () {
            post();
        });


    </script>
</head>


<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png">
                <h4 class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-3">
                <div class="field">
                    <label class="label">计算最近多少天的数据</label>
                    <div class="control">
                        <input id="days" class="input" type="text" name="days" value="300">
                    </div>
                </div>
                <div class="field">
                    <label class="label">代码</label>
                    <div class="control">
                        <input id="code" class="input" type="text" name="code" value="000001">
                    </div>
                </div>
                <div class="field is-grouped">
                    <div class="control">
                        <button class="button is-link" onclick="post()">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<hr>
<section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-4">
                <div id="container0" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container1" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container2" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>
        <div class="columns">
            <div class="column is-4">
                <div id="container3" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container4" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container5" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>
        <div class="columns">
            <div class="column is-4">
                <div id="container6" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container7" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container8" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>

        <div class="columns">
            <div class="column is-4">
                <div id="container9" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container10" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container11" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>
        <div class="columns">
            <div class="column is-4">
                <div id="container12" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container13" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container14" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>
        <div class="columns">
            <div class="column is-4">
                <div id="container15" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container16" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container17" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>
        <div class="columns">
            <div class="column is-4">
                <div id="container18" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container19" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container20" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>
        <div class="columns">
            <div class="column is-4">
                <div id="container21" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container22" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container23" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>
        <div class="columns">
            <div class="column is-4">
                <div id="container24" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container25" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container26" style="max-width:450px;height:400px"></div>
            </div>
        </div>
        <hr>
        <div class="columns">
            <div class="column is-4">
                <div id="container27" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container28" style="max-width:450px;height:400px"></div>
            </div>
            <div class="column is-4">
                <div id="container29" style="max-width:450px;height:400px"></div>
            </div>
        </div>
    </div>

    <hr>
</body>
</html>
